<template>
  <div>
    <div v-if='isShow1'>
      <el-card>
        <div>
          <el-button @click="back" icon="el-icon-arrow-left" circle></el-button>
          
        </div>
        <el-form 
          :model="editForm"
          :rules="editFormRules" 
          ref="editFormRef" 
          label-width="100px" 
          class="demo-editForm"
          >

          <el-form-item label="用例名称" prop="case_name" style="width:550px">
            <el-input v-model="editForm.case_name"></el-input>
          </el-form-item>

          <el-form-item label="标识" prop="test_id" style="width:550px">
            <el-input v-model="editForm.test_id"></el-input>
          </el-form-item>

          <el-form-item label="追踪关系" prop="pro_index" style="width:700px">
            <el-input v-model="editForm.pro_index"></el-input>
          </el-form-item>

          <el-form-item label="前提约束" prop="qtys">
            <el-select v-model="editForm.qtys" placeholder="请选择版本号">
              <el-option label="V1.0" value="版本号：V1.0"></el-option>
              <el-option label="V2.0" value="版本号：V2.0"></el-option>
              <el-option label="V3.0" value="版本号：V3.0"></el-option>
              <el-option label="V4.0" value="版本号：V4.0"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="设计方法" prop="sjff">
            <el-radio-group v-model="editForm.sjff">
              <el-radio label="等价类划分法"></el-radio>
              <el-radio label="边界值分析法"></el-radio>
              <el-radio label="场景法"></el-radio>
              <el-radio label="因果图"></el-radio>
              <el-radio label="决策表"></el-radio>
              <el-radio label="错误推测法"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="输入及操作" prop="init">
            <el-input type="textarea" v-model="editForm.init"></el-input>
          </el-form-item>

          <el-form-item label="期望结果" prop="qwjg">
            <el-input type="textarea" v-model="editForm.qwjg"></el-input>
          </el-form-item>

          <el-form-item label="评估标准" prop="pgbz">
            <el-input type="textarea" v-model="editForm.pgbz"></el-input>
          </el-form-item>

          <el-form-item label="设计人员" prop="pro_members">
            <el-select v-model="editForm.pro_members" placeholder="请选择相应的测试工程师">
              <el-option label="admin" value="admin"></el-option>
              <el-option label="visit" value="visit"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="所属功能节点" prop="label" style="width:700px">
            <el-select v-model="editForm.label" placeholder="请选择">
              <el-option
                v-for="item in pointList"
                :key="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="设计时间" required>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker type="date" placeholder="选择日期" v-model="editForm.date1" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="date2">
                <el-time-picker placeholder="选择时间" v-model="editForm.date2" style="width: 100%;"></el-time-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="submitForm">保存</el-button>
            <el-button @click="back">取消</el-button>
          </el-form-item>

        </el-form>
      </el-card>
    </div>

    <!--左侧-->
    <div v-if='isShow2'>
    <el-card style="float:left">
      <div class="custom-tree-container" >
          <div class="block" style="width:350px">
              <p>菜单功能点树</p>
              <el-button type="primary" size="mini" @click="save" round>保存</el-button>
              <el-tree
              :data="data"
              show-checkbox
              node-key="id"
              default-expand-all
              :expand-on-click-node="false"
              :render-content="renderContent"
              draggable>
              </el-tree>
          </div>
      </div>
    </el-card>

      <el-card>
      <div style="float:right">
        <div style="width:900px">

          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用例名">
              <el-input v-model="formInline.case_name" placeholder="请输入用例名"></el-input>
            </el-form-item>
            <el-form-item label="标识">
              <el-input v-model="formInline.test_id" placeholder="请输入用例标识"></el-input>
            </el-form-item>
            <el-form-item label="设计方法">
              <el-select v-model="formInline.sjff" placeholder="请选择设计方法">
                <el-option label="等价类划分法" value="等价类划分法"></el-option>
                <el-option label="边界值分析法" value="边界值分析法"></el-option>
                <el-option label="场景法" value="场景法"></el-option>
                <el-option label="因果图" value="因果图"></el-option>
                <el-option label="决策表" value="决策表"></el-option>
                <el-option label="错误推测法" value="错误推测法"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="设计人员">
              <el-select v-model="formInline.pro_members" placeholder="请选择设计人员">
                <el-option label="admin" value="admin"></el-option>
                <el-option label="visit" value="visit"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>

          <div style="height:400px">
            <el-table
              border
              :data="tableData.slice((queryInfo.pagenum-1)*queryInfo.pagesize, queryInfo.pagenum*queryInfo.pagesize)"
              style="width: 100%">
              <el-table-column
                label="用例名"
                prop="case_name">
              </el-table-column>
              <el-table-column
                label="标识"
                prop="test_id">
              </el-table-column>
              <el-table-column
                label="设计方法"
                prop="sjff">
              </el-table-column>
              <el-table-column
                label="设计人员"
                prop="pro_members">
              </el-table-column>
              <el-table-column align="left">
                <template slot="header">
                  <el-button
                    icon="el-icon-edit"
                    type="primary"
                    @click="open">新增</el-button>
                </template>
                <template slot-scope="scope">
                  
                  <el-button
                    size="mini"
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                  
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[1, 2, 5, 10]"
              :page-size="queryInfo.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData.length"
            ></el-pagination>
          </div>

        </div>
      </div>
      </el-card>
    </div>

  </div>
</template>

<script>
  // 左侧
  let id = 1000;

  export default {


    data() {
      const data = [
      {
        id: 1,
        label: '用户管理',
        IsShow: false,
        children: [{
          id: 6,
          label: '用户列表',
          IsShow: false,
          children: [{
            id: 9,
            label: '测试工程师列表',
            IsShow: false
          }]
        }]
      },
      {
        id: 2,
        label: '权限管理',
        IsShow: false,
        children:[{
          id: 7,
          label: '角色管理',
          IsShow: false
        },{
          id: 8,
          label: '权限管理',
          IsShow: false
        }]
      },
      {
        id: 3,
        label: '项目管理',
        IsShow: false
      },
      {
        id: 4,
        label: '过程管理',
        IsShow: false
      },
      {
        id: 5,
        label: '数据统计',
        IsShow: false
      }
    ];
      return {
        pointList: [],
        isShow1:false,
        isShow2:true,
        editForm: {},
        queryInfo: {
          // query: "",
          pagenum: 1, //当前的页数
          pagesize: 5, //当前每页显示多少条
        },
        data: JSON.parse(JSON.stringify(data)),
        tableData: [],
        formInline: {
          case_name: '',
          test_id: '',
          sjff: '',
          pro_members: ''
        }
      }
    },
    mounted: function() {
      this.view()
      this.getpoint()
    },
    methods: {
    getpoint(){
      this.$http.get('/api/get_point').then(res=>{
        this.pointList = res.data
      });
    },
    view(){
      this.$http.get('/api/test_case').then(res=>{
        this.tableData = res.data
      });
      this.$http.get('/api/point_view').then(res1=>{
        this.data = res1.data
      });
    },
    save(){
      this.$http.post('/api/give',this.data).then(res=>{
      });
      this.$message.success("更新功能树成功！")
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class='custom-tree-node'>
          <span>{node.label}</span>
          <span>
            <el-button size='mini' type='text' on-click={() => this.append(data)}>
              添加
            </el-button>
            <el-button size='mini' type='text' on-click={() => this.remove(node, data)}>
              删除
            </el-button>
            <el-button size='mini' type='text' on-click={() => this.alter(node, data)}>
              修改
            </el-button>
            {
              data.IsShow ? (
                <span>
                  <el-input
                    size="mini"
                    placeholder='请输入内容'
                    value={data.label}
                    onInput={ (a) => this.Inp(a, data) }
                    clearable>
                  </el-input>
                </span>
              ) : ('')
            }
          </span>
        </span>
      )
    },
    Inp(value, data) {
      data.label = value
    },
    // 树添加
    append(data) {
      const newChild = { id: '', label: 'testtest', children: [], IsShow: false }
      if (!data.children) {
        this.$set(data, 'children', [])
      }
      data.children.push(newChild)
    },
    // 树删除
    remove(node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex((d) => d.id === data.id)
      children.splice(index, 1)
    },
    // 树修改
    alter(node, data) {
      // console.log(node)
      console.log(data.label)
      data.IsShow = !data.IsShow
      this.$http.post('/api/point_case', {label:data.label}).then(res=>{
        this.tableData = res.data
        console.log(this.tableData)
      });
    },
    // 表新增
    open() {
      localStorage.clear();
      this.$router.push("/cases/gntable");
    },
    // 表删除
    handleDelete(index, row) {
      // console.log(index, row);
      this.$http.post('/api/test_case_drop',{yl_id:index}).then(res=>{
        this.tableData = res.data
        console.log(res.data)
      });
    },
    // 表打开
    handleEdit(index, row){
      this.isShow1 = true;
      this.isShow2 = false;
      this.$http.post('/api/test_case_open',{yl_id:index}).then(res=>{
        this.editForm = res.data[0]
      });
    },
    // 表编辑
    submitForm(){
      this.$http.post('api/test_case_edit', this.editForm).then(res=>{
        this.view()
        this.$message.success("更新用例成功！")
        this.isShow1 = false;
        this.isShow2 = true;
      });
    },
    // 表查询
    onSubmit() {
      this.$http.post('api/test_case_query', this.formInline).then(res=>{
        this.tableData = res.data
        console.log(this.tableData)
      });
    },
    // 返回
    back() {
      this.isShow1 = false;
      this.isShow2 = true;
    },
    //监听pagesize改变的事件
    handleSizeChange(newSize) {
      console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.view()
    },
    // 监听页码值改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.queryInfo.pagenum = newPage
      this.view()
    },
    }
  };

</script>

<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }



</style>
